<template>
  <div class="input-setters" v-if="formConfig.showUpload">
    <el-input 
      :placeholder="formConfig.placeholder"
      v-model="modelValue"
      @blur="handleInputBlur"
      :maxlength="maxlength"
    ></el-input>

    <el-upload  style="margin-left: 10px;"
      accept="image/*"
      :action="fileUploadUrl"
      :on-success="onSuccess"
      :before-upload="beforeUpload"
      :headers="uploadHeaders"
      :limit="2"
      :show-file-list="false"
    >
      <el-button plain>上传</el-button>
    </el-upload>
  </div>
  <el-input v-else
    :placeholder="formConfig.placeholder"
    v-model="modelValue"
    @blur="handleInputBlur"
    :maxlength="maxlength"
  ></el-input>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'

interface Props {
  formConfig: any
}

interface Emit {
  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
}

const emit = defineEmits<Emit>()
const props = defineProps<Props>()

const modelValue = ref(props.formConfig.value || '')
// console.log('props', props.formConfig)
const maxlength = computed(() => {
  const { key, maxNum } = props.formConfig
  return maxNum ? Number(maxNum) : (key === 'placeholder' ? 20 : '')
})

const handleInputBlur = () => {
  const { key, validate, value } = props.formConfig
  const preValue = value || ''

  if (validate && typeof validate == 'function') {
    const validateResult: boolean = validate(modelValue.value)

    if (!validateResult) {
      return
    }
  }

  if (preValue !== modelValue.value) {
    emit(FORM_CHANGE_EVENT_KEY, { key, value: modelValue.value })
  }
}

const beforeUpload = (file: any) => {
  // console.log(file)
  const isJPG = file?.type === 'image/jpeg'
  const isPNG = file?.type === 'image/png'
  const isJPEG = file?.type === 'image/jpeg'
  const isGIF = file?.type === 'image/gif'
  const isLt2M = file.size / 1024 / 1024 < 5

  if (!isPNG && !isJPEG && !isGIF && !isJPG) {
    return false
  }
  
  if (!isLt2M) {
    (window as any).$ui.msg('上传文件大小不能超过 5MB!')
    return false
  }
  return true
}
const fileList = ref([])
const onSuccess = (uploadFile: any, uploadFiles: any) => {
  // console.log(uploadFile)
  try {
    modelValue.value = uploadFile.data[0].filename
    const { key, validate, value } = props.formConfig
    const preValue = value || ''

    if (validate && typeof validate == 'function') {
      const validateResult: boolean = validate(modelValue.value)

      if (!validateResult) {
        return
      }
    }

    if (preValue !== modelValue.value) {
      emit(FORM_CHANGE_EVENT_KEY, { key, value: modelValue.value })
    }
  } catch (error) {
    console.log(error)
  }
}

const fileUploadUrl = (window as any).$app.baseURL + '/zn-e-library/dataform/file/upload'
const uploadData = {
  unZip: true,
  frameNum: 1,
  userId: (window as any).$app.user.userId,
  priority: '7',
  sourceDel: '0',
  ttlTimes: '7',
  timePoint: '00:00:05'
}
const uploadHeaders = {
  branchCode: (window as any).$app.user.branchCode || 'twpaas',
  'X-Client-Language': 'zh_CN',
  'Access-Token': (window as any).$app.token,
  'X-User-Account': (window as any).$app.user.userId
}

watch(
  () => props.formConfig.value,
  (value) => {
    if (value !== modelValue.value) {
      modelValue.value = value
    }
  }
)
</script>
<style lang="scss" scoped>
.input-setters {
  display: flex;
}
</style>